<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
	<head>
		<link rel="stylesheet" href="../../static/css/DPlayer.min.css" />
	</head>
	<head th:include="/header.html"/>
	<body>
		<div class="showVideo" style="position: relative; width: 80%; height: auto;margin: 0 auto">
			<div id="dplayer"></div>
		</div>
		<!-- HLS支持 实时视频，M3U8格式 -->
		<!--<script src="https://cdn.staticfile.org/hls.js/1.0.3/hls.min.js"></script>-->
		<!-- FLV支持 它需要 flv.min.js 库 -->
		<!--<script src="https://cdn.staticfile.org/flv.js/1.5.0/flv.min.js"></script>-->

		<div th:include="/footer.html"/>
		<script>
			// 官方文档：http://dplayer.js.org/zh/guide.html
			var dp = new DPlayer({
				element: document.getElementById('dplayer'), // 可选，player元素
				autoplay: false, // 可选，自动播放视频，不支持移动浏览器
				theme: '#FADFA3', // 可选，进度条颜色，默认: #b7daff
				loop: false, // 可选，循环播放音乐，默认：true
				// lang: 'zh', // 可选，语言，`zh'用于中文，`en'用于英语，默认：Navigator 
				screenshot: true, // 可选，启用截图功能，默认值：false
				hotkey: true, // 可选，绑定热键，包括左右键和空格，默认值：true时候可键盘操作
				preload: 'auto', // 可选，预加载的方式可以是'none''metadata''auto'
				video: {
					// url: '若能绽放光芒.mp4', // 必填，视频网址，此为简洁模式
					quality: [{
						name: '高清', // 可以配置多个视频地址，不同清晰度
						// url: 'https://vd2.bdstatic.com/mda-nec3gnx08kgddx54/sc/cae_h264/1652409350861181733/mda-nec3gnx08kgddx54.mp4'
						url: '/getVideo?filePath=vue.mp4'
						url: 'https://cdn.xjzyplay.com/20220810/tulmuvj3/index.m3u8'
					}, {
						name: '模糊', // 可以配置多个视频地址，不同清晰度
						url: 'https://vd2.bdstatic.com/mda-kjd0jv9kbkn4av0y/v1-cae/sc/mda-kjd0jv9kbkn4av0y.mp4'
					}],
					defaultQuality: 0, // 默认播放视频，上面的quality数组的下标
					pic: 'https://t7.baidu.com/it/u=825057118,3516313570&fm=193&f=GIF', // 可选，视频首页图片
					type: 'auto'
				},
				// 可选，显示弹幕，忽略此选项以隐藏弹
				// danmaku: {
				// 	id: '9E2E3368B56CDBB4', // 必需，弹幕 id，注意：它必须是唯一的，不能在你的新播放器
				// 	api: 'https://api.prprpr.me/dplayer/', // 必需，弹幕 api
				// 	token: 'tokendemo', // 可选，api 的弹幕令牌
				// 	maximum: 1000, // 可选，最大数量的弹幕
				// 	addition: ['https://api.prprpr.me/dplayer/bilibili?aid=4157142'] // 可选的，额外的弹幕，参见：`Bilibili弹幕支持`
				// }
			});
		</script>
	</body>
</html>
